<template>
   <div class="login_container">
     <div class="login_box">
      <el-form ref="loginFormRef" model="loginForm" rules="loginRules" class="login_form" label-width="0px">
      
         <el-form-item prop="username">
           <el-input v-model="loginForm.tname" prefix-icon="iconfont icon-denglu "></el-input>
         </el-form-item>
     
         <el-form-item prop="password">
           <el-input v-model="loginForm.tpwd" prefix-icon="iconfont icon-mima " type="password"></el-input>
         </el-form-item>
      
         <el-form-item class="btns">
           <el-button type="primary" @click="login()">登录</el-button>
           <el-button type="info" @click="resetLoginForm()">重置</el-button>
         </el-form-item>

      </el-form>
     </div>
   </div>
</template>
<script>
export default{
   data(){
       return{
         //表单数据
           loginForm:{
               tname:"longge",
               tpwd:"123456"
           },
           //验证对象
           loginRules:{
             tname:[
               { required: true, message: '请输入用户名', trigger: 'blur' },
               { min: 5, max: 10, message: '长度在 5 ~ 10 个字符', trigger: 'blur' }
             ],
             tpwd:[
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 6, max: 10, message: '长度在 3 ~ 5 个字符', trigger: 'blur' }
             ],
           },
       };
   },
   methods:{
     //重置表单内容
     resetLoginForm(){
       this.$refs.loginFormRef.resetFields();
     },
     login(){
       this.$refs.loginFormRef.validate(async vaild=>{
         if(!vaild) return;

         const {data:res}=await this.$http.post("logint",this.loginForm);
         if(res=="ok"){
          window.sessionStorage.setItem("user",res.user);//存储user对象
          this.$message.success("操作成功！");
          this.$router.push({path:"/manhome"});
          
          
         }else{
          this.$message.error("操作失败！");
         }
       })
     },
   },
}
</script>
<style  scoped>

.login_container{
  background-color: #2b4b6b;
  height:100%;
}
.login_box{
  width:450px;
  height:300px;
  background-color: #fff;
  border-radius:3px;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.btns{
  display:flex;
  justify-content:flex-end;
}
.login_form{
  position: absolute;
  bottom:0%;
  width:100%;
  padding:0 10px;
  box-sizing:border-box;
}
</style>